﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Page.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="/scripts/common/index.html"></jsp:include>
<jsp:include page="/scripts/jquery/index.html"></jsp:include>
<jsp:include page="/scripts/dhtmlx/index.html"></jsp:include>
<jsp:include page="/scripts/bootstrap/index.html"></jsp:include>
<link rel="stylesheet" href="${basePath }style/default.css">
<script>
	var sysCode;
	function init(){
		initAuth();
		clickFun();
		initDate();
	}
	function initAuth(){
		if("${CurrentUserBean.authMap.sys_auth_u}"=="1"){
			$("#update").attr("disabled",false);
		}; 
	}
	function initDate(){
		initSystem();//加载系统列表
	}
	
	var temp = false;
	//角色权限配置
	function save() {
		var v =getDate();
		var roleCode = $("#roleCode").val();
		var systemCode = $("#systemCode").val();
			$.ajax({
				type : 'POST' ,
				url : 'page/system/auth/Auth/doAdd' ,
				data : {"map.roleCode":roleCode,"map.systemCode":systemCode,"map.authCode":v},
				dataType : "json" ,
				async : true ,
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					if (response.status) {
						SN.alert.info(response.content);
					} else {
						alert(response.content);
					}
					myRole();
				} ,
				error : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
				} ,
				complete : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
				}
			});
	}
	//加载系统
	function initSystem(){
		$.ajax({
			type : 'POST' ,
			url : 'page/system/auth/Auth/getSystem' ,
			data : {} ,
			dataType : "json" ,
			async : true ,
			cache : false ,
			jsonpCallback : "null" ,
			success : function(obj) {
					$.each(obj.content, function(i) {
						/* alert(JSON.stringify(obj.content)); */
						var str = "";
						//str += "<input type='checkbox' id='roleId_"+i+"' value='"+i+"' name='map.roles' />"+obj.content[i].roleName+"&nbsp;";
						str = "<tr><td class='' id=" + obj.content[i].systemCode + " onclick='roleClick(\"" + obj.content[i].systemCode + "\")' style='height: 25px; border: 0px solid #FFF;padding-left: 10px;cursor:pointer'>" + obj.content[i].systemName + "</td></tr>";
						$("#systemOrder").append(str);
						if (i == 0) {
							$("#" + obj.content[i].systemCode).css("background-color", "#cccccc");
							sysCode = obj.content[i].systemCode;
							
						}
					});
					roleClick(sysCode);
			} ,
			error : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			} ,
			complete : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			}
		});
	}
	//角色点击事件
	function roleClick(id) {
		$("#systemCode").val(id);
		//thisRoleId = id;
		//初始化当前系统的功能
		initSystemModular(id);
		//add by ljy 角色选中
		mousedown(id);
	}
	//add by ljy 系统选中样式
	function mousedown(id) {
		$("#systemOrder").find("tr").find("td").each(function(){
			//alert($(this).attr('id'));
			if($(this).attr('id')==id){
				$("#" + id).css("background-color", "#cccccc");
			}else{
				$("#" + $(this).attr('id')).css("background-color", "#ffffff");
			}
		});
	}
	//加载系统模块功能
	function initSystemModular(id){
		$.ajax({
			type : 'POST' ,
			url : 'page/system/auth/Auth/getSystemModular' ,
			data : {"map.systemCode":id} ,
			dataType : "json" ,
			async : true ,
			cache : false ,
			jsonpCallback : "null" ,
			success : function(obj) {
				$("#myModular tr").remove();
				$.each(obj.content, function(i) {
					//alert(JSON.stringify(obj.content[i].functionM));
					var tr_1="<tr><td colspan='4'>"+obj.content[i].modularName+"</td></tr>";
					$("#myModular").append(tr_1);
					var func = obj.content[i].functionM;
					$.each(func, function(j) {
						var tr_2 =  $("<tr></tr>");
						var td_1 =  $("<td style='border-right-style: none;'>&nbsp;&nbsp;</td>");
						var td_2 =  $("<td style='border-left-style: none;''>"+ func[j].functionName +"</td>");
						var td_3 =  $("<td><div class='checkDiv'><div id='"+func[j].authCode+"' onclick='check(this)' isCheck='false' class='dhx_bg_img_fix' style='width:18px;height:18px;background-image: url(\"${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconUncheckAll.gif\")'></div><input type='hidden' name='map.authCode' value='"+ func[j].authCode +"' /></div></td>");
						var td_4 =  $("<td></td>");
						var opera = func[j].operation;
						$.each(opera, function(m) {
							//alert(JSON.stringify(opera[m].operationName));
							var ch = $("<div class='checkDiv'><div id='"+ opera[m].authCode+"' onclick='check(this)' isCheck='false' class='dhx_bg_img_fix' style='width:18px;height:18px;background-image: url(\"${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconUncheckAll.gif\")'></div><label>"+opera[m].operationName +"</label><input type='hidden' name='map.authCode' value='"+ opera[m].authCode +"'/></div>");
							td_4.append(ch);
						});
						tr_2.append(td_1);
						tr_2.append(td_2);
						tr_2.append(td_3);
						tr_2.append(td_4);
						$("#myModular").append(tr_2);
						
					});
				});
				
				myRole();
				
			} ,
			error : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			} ,
			complete : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			}
		});
	}
	function clickFun() {
		//全选
		$("#choice").click(function() {
			$(".checkDiv div[isCheck='false']").each(function(){
				$(this).attr("isCheck","true");
				$(this).css("background-image","url('${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconCheckAll.gif')");
			});
		});
		//全不选
		$("#notChoice").click(function() {
			$(".checkDiv div[isCheck='true']").each(function(){
				$(this).attr("isCheck","false");
				$(this).css("background-image","url('${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconUncheckAll.gif')");
			});
		});
		//刷新
		$("#refresh").click(function() {
			//query();
			roleClick(sysCode);
		});
		//浏览
		$("#view").click(function() {
		});
		
		//重置
		$("#repeat").click(function() {
			window.location.reload();
		});
	}
	/*选中角色样式*/
	function myRole(){
		var roleCode = $("#roleCode").val();
		var systemCode = $("#systemCode").val();
		$.ajax({
			type : 'POST' ,
			url : 'page/system/auth/Auth/getAuthCode' ,
			data : {"map.roleCode":roleCode,"map.systemCode":systemCode} ,
			dataType : "json" ,
			async : true ,
			cache : false ,
			jsonpCallback : "null" ,
			success : function(obj) {
				$(".checkDiv div[isCheck='true']").each(function(){
					$(this).attr("isCheck","false");
					$(this).css("background-image","url('${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconUncheckAll.gif')");
				});
				$.each(obj.content, function(i) {
				//alert(JSON.stringify(obj.content));
					$("#"+obj.content[i].authCode).attr("isCheck","true");
					$("#"+obj.content[i].authCode).css("background-image","url('${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/iconCheckAll.gif')");
				
				});
			} ,
			error : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			} ,
			complete : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
			}
		});
	}
	//获取点击项
	function getDate(){
		var authCode="";
		$(".checkDiv div[isCheck='true']").each(function(){
			authCode += $(this).parents(".checkDiv").find("input").val()+",";
		});
		return authCode;
	}
	/* checkbox点击事件 */
	function check(obj) {
		var ischecked = obj.getAttribute("isCheck");
		var backgroundimg = "${basePath}scripts/dhtmlx/codebase/imgs/dhxtree_terrace/";
		if (ischecked == "false") {
			obj.style.backgroundImage = "url('" + backgroundimg + "iconCheckAll.gif')";
			obj.setAttribute("isCheck", "true");
		} else if (ischecked == "true") {
			obj.style.backgroundImage = "url('" + backgroundimg + "iconUncheckAll.gif')";
			obj.setAttribute("isCheck", "false");
		}
	}
	
</script>
</head>
<style>
.authClass {
	border-color: #f5f5f5;
	border-width: 0px 0px 0px 0px;
}

.authClass thead>tr {
	height: 30px;
	background: #ededed;
}

.authClass td {
	line-height: 30px;
}

.checkDiv {
	float: left;
	margin-left: 5px;
	margint-right: 5px;
	margin-top: 2px;
	/* width: 65px; */
	height: 18px;
}

.checkDiv>div {
	float: left;
}

.checkDiv>label {
	line-height: 25px;
	float: left;
	margin-left: 3px;
	font-weight: normal;
}

.treeHead {
	width: 100%;
	line-height: 30px;
	text-align: center;
	letter-spacing: 2px;
	font-weight: bold;
	background: #ededed;
}

.treeBody>table {
	width: 100%;
	line-height: 30px;
}
</style>
<body onload="init()" style="margin: 0;" margintop="0">
	<form class="form-horizontal MyForm" id="MyForm" name="MyForm" method="post" target="MyFrame" enctype="multipart/form-data">
		<table class="treelistClass" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td class="treeClass">
					<div style="height: 100%;overflow: auto;">
						<div class="treeHead">请选择系统</div>
						<div class="treeBody">
							<table id="systemOrder">
							</table>
						</div>
					</div>
				</td>
				<td class="treeSplitClass">
					<div></div>
				</td>
				<td class="listTdClass">
					<table class="listTableClass" border="0" cellpadding="0" cellspacing="0">
						<tr class="queryClass">
							<td>
								<table style="width:24%;">
									<tr>
										<td class="contClass">
										<label class="col-xs-3 control-label">角色名称：</label>
											<div class="col-xs-8">
												<input type="hidden" id="systemCode" />
												<select class="form-control" name="map.roleCode" id="roleCode" onchange="myRole()">
													<c:forEach var="role" items="${RoleList }">
														<option value="${role.roleCode }" ${role eq map.type?'selected="selected"':'' }>${role.roleName }</option>
													</c:forEach>
												</select>
											</div></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr class="listTrClass">
							<td>
								<table class="listTableClass">
									<tr class="listContClass">
										<td>
											<div>
												<button class="btn btn-primary" id="choice" type="button">
													<span>全选</span>
												</button>
												<button class="btn btn-primary" id="notChoice" type="button">
													<span>全不选</span>
												</button>
												<button class="btn btn-primary" onclick="save()" disabled="disabled"  type="button" id="update">
													<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>&nbsp;<span>保存</span>
												</button>
												<button class="btn btn-primary" id="refresh" type="button">
													<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> &nbsp; <span>刷新</span>
												</button>
												<button class="btn btn-primary" id="repeat" type="button">
													<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> &nbsp; <span>重置</span>
												</button>
											</div>
										</td>
									</tr>
									<tr class="listTrClass">
										<td>
											<div style="width: 98%;height: 100%;margin: auto;overflow: auto; ">
												<table border="1" width="100%" class="authClass">
													<thead>
														<tr>
															<th colspan="2">模块功能列表</th>
															<th style="width: 50px;">是否授权</th>
															<th width="70%">操作权限分配</th>
														</tr>
													</thead>
													<tbody id="myModular" >
													</tbody>
												</table>
											</div>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
